<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>疫情出行登记</title>
  <link rel="stylesheet" href="./lib/vant/index.css" />
  <link rel="stylesheet" href="style.css" />
  <script>
    (function initRem() {
      var designWidth = 750;
      var designRootFontSize = 100;
      var deviceWidth = window.innerWidth;
      var dpr = window.devicePixelRatio;

      document.documentElement.style.fontSize =
        designWidth / ((designWidth / designRootFontSize) * dpr) + "px";
    })();

  </script>
  <script src="./lib/vue/vue.js"></script>
  <script src="./lib/vant/vant.min.js"></script>

</head>

<body>
  <div class="register-tab" id="js-tab">
    <div class="fixed-top">
      <div class="banner"></div>
      <div class="tab-title">
        <div class="tab-item" @click="onTabChange(0)" :class="{active : !activeTabIndex}">出行登记</div>
        <div class="tab-item" @click="onTabChange(1)" :class="{active: activeTabIndex}">我的登记</div>
      </div>
    </div>

    <div class="tab-content">
      <div class="tab-content-register" v-if="!activeTabIndex">
        <div class="register">
          <div class="register-area first">
            <h3 class="register-title">当前检查站</h3>
            <div class="flex-wrapper">
              <h3 class="register-text" style="margin-bottom: 0;">
                检查站
              </h3>
              <p style="color: #1472f2" @click="togglePicker">
                {{ selectVal }}
              </p>
            </div>
          </div>
          <div class="register-area">
            <h3 class="register-title">填写个人信息</h3>
            <h3 class="register-text">上传身份证人像面</h3>

            <label for="input-upload" class="input-label">
              <input type="file" id="input-upload" />
            </label>

            <div class="register-input">
              <p class="input-title">姓名</p>
              <input type="text" placeholder="请输入姓名" />
            </div>
            <div class="register-input">
              <p class="input-title">车牌号</p>
              <input type="text" placeholder="请输入车牌号" />
            </div>
            <div class="register-input">
              <p class="input-title">身份证</p>
              <input type="text" placeholder="请输入身份证" />
            </div>
            <div class="register-input">
              <p class="input-title">手机号码</p>
              <input type="text" placeholder="请输入手机号码" />
            </div>
          </div>
          <div class="register-area">
            <h3 class="register-title">从哪里来</h3>
            <input type="text" class="register-area-input" placeholder="请输入来自哪里" />
          </div>
          <div class="register-area">
            <h3 class="register-title">去哪里</h3>
            <input type="text" class="register-area-input" placeholder="请输入目的地" />
          </div>
          <div class="register-area" style="margin-bottom: 0;">
            <p class="support">技术支持 重庆赤木科技有限公司</p>
            <p class="register-button">提交申报</p>
          </div>
        </div>
      </div>
      <div class="tab-content-list" v-else>
        <div class="list">
          <div class="item">
            <img src="./images/icon_car.png" alt="" class="item-img" />
            <div class="item-desc">
              <p class="item-car">渝A -80805</p>
              <p class="item-time">2019-20-20 110:00:00</p>
            </div>
            <div class="item-arrow">></div>
          </div>
          <div class="item">
            <img src="./images/icon_car.png" alt="" class="item-img" />
            <div class="item-desc">
              <p class="item-car">渝A -80805</p>
              <p class="item-time">2019-20-20 110:00:00</p>
            </div>
            <div class="item-arrow">></div>
          </div>
        </div>
      </div>

    </div>
    <!-- 选择器 -->
    <van-popup position="bottom" :round="true" v-model="showPicker">
      <van-picker :show-toolbar="true" :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
  </div>
  <script src="tab.js"></script>
</body>

</html>
